<template>
  <view class="mine-container">
    <!-- 顶部背景和头像 -->
    <view class="header">
      <image class="avatar" :src="avatarUrl" @click="chooseAvatar"></image>
      <view class="nickname">{{ userName }}</view>
    </view>
    <!-- 菜单列表 -->
    <view class="menu-list">
      <view class="menu-item" @click="goProfile">
        <image class="icon" src="/static/mine_profile.png"></image>
        <text>个人资料</text>
        <uni-icons type="right" size="20" color="#bbb"/>
      </view>
      <view class="menu-item" @click="goCarUpload">
        <image class="icon" src="/static/mine_car.png"></image>
        <text>车辆查询</text>
        <uni-icons type="right" size="20" color="#bbb"/>
      </view>
      <view class="menu-item" @click="goFaceAuth">
        <image class="icon" src="/static/mine_face.png"></image>
        <text>人脸认证</text>
        <uni-icons type="right" size="20" color="#bbb"/>
      </view>
      <view class="menu-item" @click="goSetting">
        <image class="icon" src="/static/mine_setting.png"></image>
        <text>设置</text>
        <uni-icons type="right" size="20" color="#bbb"/>
      </view>
      <view class="menu-item logout" @click="logout">
        <image class="icon" src="/static/mine_logout.png"></image>
        <text>退出登录</text>
        <uni-icons type="right" size="20" color="#bbb"/>
      </view>
    </view>
  </view>
</template>

<script>
import request from '@/util/request.js';

export default {
  name: "MinePage",
  data() {
    return {
      avatarUrl: '/static/home_user.png',
      userName: '加载中...',
      userInfo: null,
      phoneNumber: ''
    }
  },
  
  onShow() {
    this.getUserInfo();
  },
  methods: {
    // 获取用户信息
    async getUserInfo() {
      try {
        // 从本地获取登录手机号
        const phoneNumber = uni.getStorageSync('phoneNumber');
        this.phoneNumber = phoneNumber || '';
        
        if (!phoneNumber) {
          console.log('未找到登录手机号');
          this.userName = '未登录';
          return;
        }
        
        // 请求后台获取用户信息
        const res = await request({
          url: 'property-server/getUserInfo',
          method: 'GET'
        });
        
        if (res.code === 200) {
          this.userInfo = res.data;
          this.userName = res.data.accountName || '未命名';
          this.avatarUrl = res.data.avatarUrl || '/static/home_user.png';
        } else {
          this.userName = '获取失败';
          uni.showToast({
            title: '获取用户信息失败',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('获取用户信息错误:', error);
        this.userName = '获取失败';
        uni.showToast({
          title: '网络错误，请重试',
          icon: 'none'
        });
      }
    },
    
    goProfile() {
      uni.navigateTo({
        url: '/pages/mine/profile'
      });
    },
    goCarUpload() {
      // 跳转车辆上传
    },
    goFaceAuth() {
      uni.navigateTo({
        url: '/pages/mine/face-auth'
      });
    },
    goSetting() {
      // 跳转设置
    },
    logout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            // 清除本地存储的用户信息
            uni.removeStorageSync('token');
            uni.removeStorageSync('userInfo');
            uni.removeStorageSync('phoneNumber');
            
            // 重置页面数据
            this.userName = '未登录';
            this.avatarUrl = '/static/home_user.png';
            this.userInfo = null;
            
            // 跳转到登录页
            uni.reLaunch({
              url: '/pages/index/index'
            });
          }
        }
      });
    },
    chooseAvatar() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          if (res.tempFilePaths && res.tempFilePaths.length > 0) {
            this.avatarUrl = res.tempFilePaths[0];
          }
        }
      });
    }
  }
}
</script>

<style scoped>
.mine-container {
  background: #f5f6fa;
  min-height: 100vh;
}
.header {
  background: linear-gradient(90deg, #5b9df9 0%, #6ad1f9 100%);
  padding: 50rpx 0 40rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  border: 4rpx solid #fff;
  background: #fff;
}
.nickname {
  color: #fff;
  font-size: 36rpx;
  margin-top: 20rpx;
  font-weight: bold;
}
.edit-btn {
  position: absolute;
  right: 40rpx;
  top: 40rpx;
  background: rgba(255,255,255,0.2);
  color: #fff;
  font-size: 24rpx;
  padding: 8rpx 24rpx;
  border-radius: 24rpx;
}
.menu-list {
  margin: 40rpx 20rpx 0 20rpx;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 24rpx 0 rgba(0,0,0,0.04);
  overflow: hidden;
}
.menu-item {
  display: flex;
  align-items: center;
  padding: 32rpx 24rpx;
  border-bottom: 1px solid #f0f0f0;
  font-size: 30rpx;
  color: #333;
}
.menu-item:last-child {
  border-bottom: none;
}
.icon {
  width: 56rpx;
  height: 56rpx;
  margin-right: 24rpx;
}
.logout {
  color: #333;
}
</style>